<template>
    <div class="device-properties"
        style="background: var(--color-background); padding: 1rem; border-radius: var(--border-radius-lg);">
        <h3 style="margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem;">
            <span style="font-size: 1.5em;">{{ DeviceTypeConfig[device.type as keyof typeof DeviceTypeConfig]?.icon ||
                '📱' }}</span>
            设备属性
        </h3>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">设备名称:</label>
            <input v-model="device.name" type="text"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">描述:</label>
            <textarea v-model="device.description"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; min-height: 60px; resize: vertical;"></textarea>
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">设备类型:</label>
            <select v-model="device.type"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;">
                <option v-for="(config, type) in DeviceTypeConfig" :key="type" :value="type">
                    {{ config.icon }} {{ config.name }}
                </option>
            </select>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
            <div>
                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">机架位置(U):</label>
                <input v-model.number="device.rackPosition" type="number" min="1" max="47"
                    style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
            </div>
            <div>
                <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">占用高度(U):</label>
                <input v-model.number="device.rackUnits" type="number" min="1" max="10"
                    style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
            </div>
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">功耗(W):</label>
            <input v-model.number="device.powerConsumption" type="number" min="0"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
        </div>

        <!-- 设备类型特有字段编辑 -->
        <div style="margin-bottom: 1rem;">
            <h4 style="margin: 0.5rem 0; color: var(--color-primary); font-size: 1em;">设备配置</h4>

            <!-- 服务器特有属性 -->
            <div v-if="device.type === DeviceType.SERVER">
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">CPU:</label>
                    <input v-model="(device as any).cpu" type="text" placeholder="例如: Intel Xeon E5-2680"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">内存:</label>
                    <input v-model="(device as any).memory" type="text" placeholder="例如: 64GB DDR4"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">存储:</label>
                    <input v-model="(device as any).storage" type="text" placeholder="例如: 2TB SSD RAID1"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">操作系统:</label>
                    <input v-model="(device as any).operatingSystem" type="text" placeholder="例如: Ubuntu 20.04 LTS"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
            </div>

            <!-- 网络设备特有属性 -->
            <div v-if="[DeviceType.SWITCH, DeviceType.ROUTER, DeviceType.FIREWALL].includes(device.type)">
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">端口数量:</label>
                    <input v-model.number="(device as any).portCount" type="number" min="0"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">管理IP:</label>
                    <input v-model="(device as any).managementIP" type="text" placeholder="例如: 192.168.1.100"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">固件版本:</label>
                    <input v-model="(device as any).firmware" type="text" placeholder="例如: v12.2.55"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
            </div>

            <!-- 存储设备特有属性 -->
            <div v-if="device.type === DeviceType.STORAGE">
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">容量:</label>
                    <input v-model="(device as any).capacity" type="text" placeholder="例如: 10TB"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">RAID级别:</label>
                    <input v-model="(device as any).raidLevel" type="text" placeholder="例如: RAID 5"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">接口类型:</label>
                    <input v-model="(device as any).interfaceType" type="text" placeholder="例如: SAS/SATA"
                        style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
                </div>
            </div>
        </div>

        <!-- 设备状态信息 -->
        <div style="margin-bottom: 1rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">设备状态:</label>
            <div
                style="padding: 0.5rem; background: var(--color-background-soft); border-radius: 4px; color: var(--color-text-light); font-size: 0.9em;">
                {{ device.statusDescription }}
            </div>
            <div v-if="device.type === DeviceType.SERVER && (device as any).specs !== '未配置规格'"
                style="margin-top: 0.25rem; padding: 0.5rem; background: var(--color-success); color: white; border-radius: 4px; font-size: 0.85em;">
                规格: {{ (device as any).specs }}
            </div>
            <div v-if="[DeviceType.SWITCH, DeviceType.ROUTER, DeviceType.FIREWALL].includes(device.type) && (device as any).networkInfo !== '未配置网络信息'"
                style="margin-top: 0.25rem; padding: 0.5rem; background: var(--color-success); color: white; border-radius: 4px; font-size: 0.85em;">
                网络: {{ (device as any).networkInfo }}
            </div>
            <div v-if="device.type === DeviceType.STORAGE && (device as any).storageInfo !== '未配置存储信息'"
                style="margin-top: 0.25rem; padding: 0.5rem; background: var(--color-success); color: white; border-radius: 4px; font-size: 0.85em;">
                存储: {{ (device as any).storageInfo }}
            </div>
        </div>

        <div style="display: flex; gap: 0.5rem;">
            <button @click="$emit('delete-device')"
                style="flex: 1; padding: 0.5rem; background: var(--color-danger); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                删除设备
            </button>
            <button @click="$emit('deselect')"
                style="flex: 1; padding: 0.5rem; background: var(--color-text-light); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                取消选择
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Device } from '@/stores/datacenter'
import { DeviceType, DeviceTypeConfig } from '@/stores/datacenter'

interface Props {
    device: any
}

defineProps<Props>()

defineEmits<{
    'deselect': []
    'delete-device': []
}>()
</script>